<template>
    <div class="app-container">
        <div class="wx-user-box" style="padding: 0;">
            <div class="wx-user-title">订单列表</div>
            <div class="search-box">
                <!-- 查询 -->
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item label="绑定小区">
                        <el-select v-model="params.xiaoqu_id" placeholder="请选择" filterable style="width:100%" clearable>
                            <el-option v-for="item in xiaoqus" :key="item.site_id" :label="item.site_name"
                                :value="item.site_id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="设备ID">
                        <el-input v-model="params.device_id" placeholder="请输入设备ID" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="设备状态">
                        <el-select v-model="params.device_state" placeholder="请选择" clearable>
                            <el-option label="在线" :value="1"></el-option>
                            <el-option label="离线" :value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="使用状态">
                        <el-select v-model="params.use_state" placeholder="请选择" clearable>
                            <el-option label="空闲" :value="1"></el-option>
                            <el-option label="使用中" :value="2"></el-option>
                            <el-option label="故障" :value="3"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="启用状态">
                        <el-select v-model="params.state" placeholder="请选择" clearable>
                            <el-option label="启用" :value="1"></el-option>
                            <el-option label="禁用" :value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="创建时间">
                        <el-date-picker style="width: 260px;" v-model="date" type="daterange" value-format="yyyy-MM-dd"
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="sousuo()" icon="el-icon-search">查询</el-button>
                    </el-form-item>
                </el-form>

                <el-table border :data="list" style="width: 100%">
                    <el-table-column prop="device_id" align="center" label="设备ID" width="120"></el-table-column>
                    <el-table-column prop="device_state" align="center" label="设备状态" min-width="100">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.device_state == 1" type="success">在线</el-tag>
                            <el-tag v-if="scope.row.device_state == 2" type="danger">离线</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="use_state" align="center" label="使用状态" min-width="100">
                        <template slot-scope="scope">
                            <span v-if="scope.row.use_state == 1">空闲</span>
                            <span v-if="scope.row.use_state == 2">使用中</span>
                            <span v-if="scope.row.use_state == 3">故障</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="site_name" align="center" label="绑定小区" min-width="120"></el-table-column>
                    <el-table-column prop="site_name" align="center" label="站点名称" min-width="120"></el-table-column>
                    <el-table-column prop="site_address" label="站点地址" align="center" min-width="130"></el-table-column>
                    <el-table-column prop="state" align="center" label="启用状态" min-width="100">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.state == 1" type="success">启用</el-tag>
                            <el-tag v-if="scope.state == 2" type="danger">禁用</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createtime" width="160" label="创建时间" align="center"></el-table-column>
                    <el-table-column label="操作" fixed="right" width="180" align="center">
                        <template slot-scope="scope">
                            <el-button size="mini" @click="set(scope.row)">编辑</el-button>
                            <el-button size="mini" @click="openDel(scope.row.device_id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- 分页 -->
            <div class="wx-user-pagination-div">
                <el-pagination background :current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="total" :pager-count="pageCount" prev-text="上一页"
                    next-text="下一页" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </div>

    </div>
</template>

<script>
import { query, save, del } from '@/api/equipment-admin';

export default {
    name: 'washerOrderList',
    data() {
        return {
            pageSize: 10, // 每页条数
            pageCount: 7, //
            pageSizes: [10, 20, 30, 50, 100], // 个数选择器
            currentPage: 1, // 当前页码
            total: 0, // 总条数
            list: [],
            date: '',
            params: {
                xiaoqu_id: '',
                device_id: '',
                device_state: '',
                use_state: '',
                state: '',
            },
            xiaoqus: [], //小区
        };
    },

    created() {
        // this.getData();
    },
    methods: {
        // 搜索
        sousuo() {
            this.currentPage = 1;
            this.getData();
        },
        // 每页显示的条数
        handleSizeChange(val) {
            this.pageSize = val;
            this.getData(1, val);
            // 注意：在改变每页显示的条数时，要将页码显示到第一页
            this.currentPage = 1;
        },

        // 显示第几页
        handleCurrentChange(val) {
            this.currentPage = val;
            // 切换页码时，要获取每页显示的条数
            this.getData(val, this.pageSize);
        },

        // 获取数据
        getData() {
            let data = {
                pageNumber: this.currentPage,
                pageSize: this.pageSize,
            };
            query(data).then(res => {
                if (res.state) {
                    this.total = res.data.totalRow;
                    this.list = res.data.list;
                } else {
                    this.$message.error(res.msg);
                }
            });
        },

    }
};
</script>
<style lang="scss" scoped>
.form {
    .title {
        line-height: 36px;
        font-size: 14px;
        color: #606266;
        font-weight: 700;
        margin: 12px;
    }
}
</style>
